<template>
  <div>
    <NewFieldDialog ref="newFieldDialog" :knowledgeData='knowledgeData'/>
    <NewRelatedKnowledgeDialog ref="newRelatedKnowledgeDialog" :crtField="crtField" :knowledgeLibId="knowledgeData.knowledgeLibId"/>
    <el-container>
      <el-header>
        <Headline :go-back="goBack" :name="taskItem.status === CONST.TASK_ITEM.STATUS_RELEASED ? '勘误' : '编辑'"/>
      </el-header>
      <el-container :style="{height: containerHeight + 'px'}">
        <el-aside width="200px">
          <div id="menu">
            <div class="menu-item-wrapper">
              <MenuItem v-for="(field, index) in this.knowledgeData.knowledgeFieldList" :key="field.fieldName" :item="field"
                        :index="index" :reorder="true" @change-selection="refreshList(index)"
                        @move-up="handleMoveUp" @move-down="handleMoveDown"></MenuItem>
            </div>
            <div style="margin-left: 50px; margin-top: 10px;">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="openAddFieldDialog">添加字段</el-button>
            </div>
          </div>
        </el-aside>
        <el-main style="padding: 0px 10px; ">
          <el-col :span="UTIL.isEmpty(knowledgeData.knowledgeUnitId) ? 24: 16">
            <div id="main-content" :style="{height: mainContentHeight + 'px', overflow: 'auto'}">
              <div v-for="(field, index) in this.knowledgeData.knowledgeFieldList" :key="index">
                <!-- 字符类型 -->
                <div v-if="field.kind === 0" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <!-- 自建任务, 未提交和初审驳回能直接修改名称 -->
                  <KindEditor v-if="taskItem.status === CONST.TASK_ITEM.STATUS_RELEASED || index !== 0
                              || (taskItem.type === 1 && (taskItem.status === CONST.TASK_ITEM.STATUS_NOT_COMMIT || taskItem.status === CONST.TASK_ITEM.STATUS_REJECT))"
                              :content.sync="field.fieldValue"
                              editor-type="Input"/>
                  <div v-else>
                    <span v-if='UTIL.hasUnconfirmedNameSuggestion(taskItem.nameSuggestion)' v-html="field.fieldValue" style="color: red;"/>
                    <span v-else v-html="field.fieldValue"/>
                    <el-link type="primary" @click.prevent="nameSuggestionDialogVisible = true">修改</el-link>
                    <NameSuggestionDialog
                      :crtName="taskItem.name"
                      :visible.sync="nameSuggestionDialogVisible"
                      :auditLevel="taskItem.auditLevel"
                      :status="taskItem.status"
                      :nameSuggestion="taskItem.nameSuggestion"
                      @confirm="updateNameSuggestion"
                      @cancel="nameSuggestionDialogVisible = false"/>
                  </div>
                </div>
                <!-- 富文本 -->
                <div v-else-if="field.kind === 1" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <KindEditor :content.sync="field.fieldValue"
                              :uploadPath="'knowledge/' + knowledgeData.knowledgeLibId + '/' + knowledgeData.id"
                              :filterMode="filterMode"
                              editor-type="RichEditor"
                              width="100%"/>
                  <KnowledgeSource :field="field" :fieldIndex="index"
                                   @add="addKnowledgeSource" @del="deleteKnowledgeSource"/>
                </div>
                <!-- 分类 -->
                <div v-else-if="field.kind === 2" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <el-cascader :options="$store.state.tagTree.find(tag => tag.id === field.kindValue).children"
                               :props="tagCascadeProps" :ref="'cascader' + index"
                               v-model="field.fieldValue"
                               filterable style="width: 100%"></el-cascader>
                </div>
                <!-- 单选下拉框 -->
                <div v-else-if="field.kind === 3" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <el-select :ref="'select' + index" v-model="field.fieldValue" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in $store.state.ruleList.find(rule => rule.id === field.kindValue).ruleItemList" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                  </el-select>
                </div>
                <!-- 图片 -->
                <div v-else-if="field.kind === 4" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <KImgField :field="field"
                             :fieldIndex="index"
                             @clickImg="previewImg"
                             @del="deleteImg"
                             :uploadPath="'image/knowledge/' + knowledgeData.knowledgeLibId + '/' + knowledgeData.id"
                             @upload="addImgDemo"/>
                </div>
                <!-- 多选下拉框 -->
                <div v-else-if="field.kind === 5" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <el-select multiple placeholder="请选择" style="width: 100%" v-model="field.fieldValue">
                    <el-option v-for="item in $store.state.ruleList.find(rule => rule.id === field.kindValue).ruleItemList" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                  </el-select>
                </div>
                <!-- 文本域 -->
                <div v-else-if="field.kind === 6" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <KindEditor :content.sync="field.fieldValue" editor-type="Textarea"
                              width="100%"/>
                </div>
                <!-- 多值输入框 -->
                <div v-else-if="field.kind === 7" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <MultiValueBox :fieldValue.sync="field.fieldValue"/>
                </div>
                <!-- 关联本知识库, 关联其它知识库 -->
                <div v-else-if="field.kind === 8 || field.kind === 9" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <RelatedKnowledge :field="field" :fieldIndex="index"
                                    @add="openRKDialog(field)" @del="deleteRelatedKnowledge"
                                    @re-order="reorderRelatedKnowledge"/>
                </div>
                <!-- 关联应用平台 -->
                <div v-else-if="field.kind === 10" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <el-select :ref="'select' + index" v-model="field.fieldValue" multiple placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in $store.state.platformList" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                  </el-select>
                </div>
                <!-- 视频 -->
                <div v-else-if="field.kind === 11" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <KVideoField :field="field"
                               :fieldIndex="index"
                               :uploadPath="'video/knowledge/' + knowledgeData.knowledgeLibId + '/' + knowledgeData.id"
                               @upload="handleVideoUpload"
                               @del="deleteVideo"
                               @play="playVideo"/>
                </div>
                <!-- 文件 -->
                <div v-else-if="field.kind === 12" class="field bottom-space">
                  <FieldTitle :id="'field-' + index" :field="field" :index="index" @del="deleteField"
                              @modify="modifyFieldName"/>
                  <KFileField :field="field"
                              :fieldIndex="index"
                              :uploadPath="'file/knowledge/' + knowledgeData.knowledgeLibId + '/' + knowledgeData.id"
                              @del="deleteFile"
                              @upload="handleFileUpload"/>
                </div>
              </div>
            </div>
            <!-- 各种对话框 -->
            <!-- 窗帘 -->
            <div v-if="showCurtain" class="curtain">
              <div class="el-icon-close curtain-button" @click="closeDialog"></div>
            </div>
            <!-- 图片预览 -->
            <div v-if="showImgPreview" class="img-preview-block">
              <img :alt="this.imgTitle" :src="this.imgPath">
            </div>
            <!-- 视频播放 -->
            <div v-if="showVideoPreview" :style="videoBlockStyle" class="video-preview-block">
              <video controls preload style="width: 100%; height: 100%">
                <source :src="videoSource" type="video/mp4">
              </video>
            </div>
          </el-col>

          <!-- 素材内容 -->
          <el-col v-if="UTIL.isNotEmpty(knowledgeData.knowledgeUnitId)" :span="8">
            <el-row>
              <el-col style="font-size: 24px; " :span="16">
                <span class="titleTagClass" style="margin-left: 10px; "></span>
                <span class="titleClass" :title="knowledgeData.knowledgeUnitName">{{ knowledgeData.knowledgeUnitName }}</span>
              </el-col>
              <el-col :span="8">
                <el-button style="float: right" size="small" type="primary" @click="showBookArticle">图书详情</el-button>
              </el-col>
            </el-row>
            <div id="knowledgeUnitContent" :style="{height: (mainContentHeight - 40) + 'px', overflow: 'auto', marginLeft: '10px' }">
              <div :id="'knowledgeUnitFieldContent' + idx" v-for="(knowledgeUnitField, idx) in knowledgeData.knowledgeUnitFieldList">
                <div>
                  <div style="font-size: 22px; line-height: 40px; display: inline; vertical-align: middle; " v-html="knowledgeUnitField.name"></div>
                </div>
                <div style="overflow: auto; background-color: #F0F8F8;">
                  <KindEditor width="99%" :items="[]" :content='knowledgeUnitField.content'/>
                </div>
              </div>
            </div>
          </el-col>
        </el-main>
      </el-container>
      <div style="text-align: right">
        <ToTopButton style="margin-bottom: 75px" @to-top="handleToTopClick"></ToTopButton>
        <el-button size="small" @click="preview">预览</el-button>
        <el-button @click="save()" plain size="small" type="primary"
                   v-if="this.taskItem.editOrAudit === 'edit' || taskItem.status === CONST.TASK_ITEM.STATUS_RELEASED">
          保存
        </el-button>
        <el-button @click="save()" size="small" type="primary"
                   v-if="this.taskItem.editOrAudit === 'audit'">
          保存
        </el-button>
        <el-button @click="commit()" size="small" type="primary"
                   v-if="this.taskItem.editOrAudit === 'edit'">
          提交审核
        </el-button>
        <el-button v-if="this.taskItem.editOrAudit === 'audit'" size="small" type="primary" @click="goBack">取消</el-button>
        <el-button v-if="this.taskItem.editOrAudit === 'audit'" size="small" type="primary" @click="rebut">驳回</el-button>
        <el-button @click="pass()" size="small" type="primary"
                   v-if="this.taskItem.editOrAudit === 'audit'">
          审核通过
        </el-button>
      </div>
    </el-container>
  </div>
</template>

<script>
import MenuItem from "../../common/MenuItem";
import Headline from "./Headline";
import FieldTitle from "./FieldTitle";
import KnowledgeSource from "./KnowledgeSource";
import KImgField from "./KImgField";
import MultiValueBox from "./MultiValueBox";
import KVideoField from "./KVideoField";
import RelatedKnowledge from "./RelatedKnowledge";
import ToTopButton from "../ToTopButton";
import KFileField from "./KFileField";
import NameSuggestionDialog from "./NameSuggestionDialog";
import NewFieldDialog from "./NewFieldDialog";
import NewRelatedKnowledgeDialog from "./NewRelatedKnowledgeDialog";
import {mapState} from "vuex";
import CONST from "../../../const";

export default {
  name: "KnowledgeEdit",
  components: {
    NewRelatedKnowledgeDialog,
    NewFieldDialog,
    NameSuggestionDialog,
    KFileField,
    RelatedKnowledge,
    KVideoField,
    MultiValueBox,
    KImgField,
    KnowledgeSource,
    FieldTitle,
    Headline,
    MenuItem,
    ToTopButton
  },
  computed: {
    ...mapState(['taskItem']),
  },
  methods: {
    showBookArticle() {
      // 获取当前素材字段图书文章;
      this.axios.get('/pmph/action/book/selectBookArticleByKnowledgeUnitId', {
          params: {
            knowledgeUnitId: this.knowledgeData.knowledgeUnitId
          }
        }).then((resp) => {
          this.$store.commit('setBookArticle', resp.data)
          this.$store.commit('showBookArticleDrawer')
        })
    },
    updateNameSuggestion(nameSuggestion) {
      this.taskItem.nameSuggestion = nameSuggestion
      this.$store.commit('setTaskItem', this.taskItem)
      this.nameSuggestionDialogVisible = false
    },
    async preview() {
      let previewData = JSON.parse(JSON.stringify(this.knowledgeData))
      this.setKnowledgeFieldProperty(previewData)
      await this.axios.post('/pmph/action/knowledge/selectParse2Vo', previewData)
      .then((res) => {
        previewData = res.data
      })
      this.$store.commit('setEditingKnowledge', previewData)
      this.$store.commit('showKnowledgeDetail')
    },
    save() {
      // 检查必填字段
      if (!this.prepareKnowledgeAndCheckRequiredAndImg()) {
        return
      }
      this.axios.post('/pmph/action/knowledge/save',
        UTIL.parse2FormData({
          knowledge: this.knowledgeData,
          taskItem: this.taskItem}))
        .then(() => {
        this.goBack()
      })
    },
    commit() {
      // 检查必填字段
      if (!this.prepareKnowledgeAndCheckRequiredAndImg()) {
        return
      }
      this.axios.post('/pmph/action/knowledge/commit',
        UTIL.parse2FormData({
          knowledge: this.knowledgeData,
          taskItem: this.taskItem,
        })).then(() => {
          this.goBack()
        })
    },
    pass() {
      // 检查必填字段
      if (!this.prepareKnowledgeAndCheckRequiredAndImg()) {
        return
      }
      this.$confirm('此操作会把知识传递给下一个审核人或完成审核流程，从而无法再编辑此知识，您确定要这样做吗？',
        '请确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.axios.post("/pmph/action/knowledge/pass",
            UTIL.parse2FormData({
              knowledge: this.knowledgeData,
              taskItem: this.taskItem,
            })).then(() => {
          this.goBack()
        })
      })
    },
    reject(reject) {
      this.taskItem.reject = reject
      // 检查必填字段
      if (!this.prepareKnowledgeAndCheckRequiredAndImg()) {
        return
      }
      this.axios.post("/pmph/action/knowledge/reject",
        UTIL.parse2FormData({
          knowledge: this.knowledgeData,
          taskItem: this.taskItem,
        })).then(() => {
        this.goBack()
      })
    },
    rebut() {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '驳回原因不能为空'
      }).then(({value}) => {
        this.reject(value)
      })
    },
    openAddFieldDialog() {
      this.$refs.newFieldDialog.visible = true
    },
    handleFileUpload(fieldIndex, storedPath, originName) {
      let filePaths = {}
      filePaths.name = originName
      filePaths.path = storedPath
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.push(filePaths)
    },
    handleVideoUpload(fieldIndex, videoPath) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths.push(videoPath)
    },
    deleteFile(fieldIndex, fileIndex) {
      console.log(fileIndex)
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.splice(fileIndex, 1)

    },
    deleteVideo(fieldIndex, videoIndex) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths.splice(videoIndex, 1)
    },
    handleToTopClick() {
      document.getElementById("main-content").scrollTop = 0
    },
    playVideo(fieldIndex, videoIndex) {
      let top = (CONST.WORKSPACE_HEIGHT - 360) / 2
      let left = (window.innerWidth - 640) / 2
      this.videoBlockStyle = {
        top: top + "px",
        left: left + "px"
      }
      this.videoSource = this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths[videoIndex]
      this.showCurtain = true
      this.showVideoPreview = true
    },
    goBack() {
      this.$router.back()
    },
    refreshList(index) {
      let b = document.getElementById("field-" + index).offsetTop
      let a = document.getElementById("field-0").offsetTop
      document.getElementById("main-content").scrollTop = b - a
      this.setAllItemsUnselected();
      this.knowledgeData.knowledgeFieldList[index].selected = true
    },
    setAllItemsUnselected() {
      this.knowledgeData.knowledgeFieldList.forEach(field => field.selected = false)
    },
    getKnowledgeByTaskItem() {
      this.knowledgeData = {}
      this.axios.post('/pmph/action/knowledge/selectKnowledgeByTaskItem', this.taskItem)
        .then((res) => {
        this.knowledgeData = res.data
        this.taskItem.knowledgeId = this.knowledgeData.id
        this.knowledgeData.knowledgeFieldList[0].selected = true
        this.setKnowledgeFieldValue(this.knowledgeData)
        this.updateFieldIndex()
      })
    },
    modifyFieldName(index, newName) {
      if (this.knowledgeData.knowledgeFieldList[index].knowledgeLibFieldId) {
        this.knowledgeData.knowledgeFieldList[index].displayName = newName
      } else {
        this.knowledgeData.knowledgeFieldList[index].name = newName
      }
    },
    deleteField(index) {
      this.knowledgeData.knowledgeFieldList.splice(index, 1)
    },
    deleteKnowledgeSource(fieldIndex, sourceIndex) {
      this.$confirm('确定删除这个知识来源吗？删除后无法恢复！', '删除知识来源', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        this.knowledgeData.knowledgeFieldList[fieldIndex].source.splice(sourceIndex, 1)
      });
    },
    addKnowledgeSource(fieldIndex, source) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].source.push(source)
    },
    previewImg(fieldIndex, imgIndex) {
      this.showCurtain = true
      this.showImgPreview = true
      this.imgPath = this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths[imgIndex]
      this.imgTitle = this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.title
    },
    deleteImg(fieldIndex, imgIndex) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths.splice(imgIndex, 1)
    },
    addImgDemo(fieldIndex, imgPath) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.paths.push(imgPath)
    },
    closeDialog() {
      this.showImgPreview = false;
      this.showVideoPreview = false;
      this.showCurtain = false;
    },
    reorderRelatedKnowledge(fieldIndex, positionIndex, originIndex) {
      let originValue = this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue[originIndex]
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.splice(positionIndex, 0, originValue)
      if (positionIndex < originIndex) {
        this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.splice(originIndex + 1, 1)
      } else {
        this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.splice(originIndex, 1)
      }
    },
    deleteRelatedKnowledge(fieldIndex, drkIndex) {
      this.knowledgeData.knowledgeFieldList[fieldIndex].fieldValue.splice(drkIndex, 1)
    },
    openRKDialog(field) {
      this.crtField = field
      this.$refs.newRelatedKnowledgeDialog.visible = true
    },
    prepareKnowledgeAndCheckRequiredAndImg() {
      this.setKnowledgeFieldProperty(this.knowledgeData)
      this.knowledgeData.name = this.knowledgeData.knowledgeFieldList[0].fieldValue
      for (let field of this.knowledgeData.knowledgeFieldList) {
        if (field.required &&
          (!field.fieldValue || JSON.stringify(field.fieldValue) === CONST.KNOWLEDGE_FIELD_VALUE_DEFAULT[field.kind])) {
          this.$message.error('字段: ' + field.name + '不能为空')
          return false
        }
        // 只有富文本可能通过ctrl+v引入外网图片或base64图片;
        if (field.fieldValue && field.kind === CONST.FIELD_KIND_RICHEDITOR) {
          let tempDiv = document.createElement('div');
          tempDiv.innerHTML = field.fieldValue
          let imgElementList = tempDiv.getElementsByTagName('img');
          for (let imgElement of imgElementList) {
            let imgSrc = imgElement.getAttribute('src');
            if (imgSrc.startsWith('file') || imgSrc.startsWith('data')) {
              this.$message.warning('字段' + field.name + '包含本地图片, 请删除后通过附件上传')
              return false
            } else if (imgSrc.startsWith(CONST.ENV.RESOURCE_URL)) {
              imgElement.setAttribute('src', imgSrc.replace(CONST.ENV.RESOURCE_URL, ''))
              imgSrc = imgElement.getAttribute('src')
            } else if (imgSrc.startsWith('http')) {
              this.$message.warning('字段' + field.name + '包含外网图片, 请删除后通过附件上传')
              return false
            }
          }
        }
      }
      return true
    },
    handleMoveUp(index) {
      // 如果要调换的字段已经是第一个字段，则不可向上调换位置
      // 由于第一个字段默认是知识名称，知识名称必须是第一个字段，所以第二个字段不可以向上调换位置
      if (index === 0 || index === 1) {
        this.$message.warning("不可调换位置")
        return
      }
      this.handleMoveDown(index - 1)
    },
    handleMoveDown(index) {
      // 如果要调换的字段已经是最后一个字段，则不可以向下调换位置
      if (index === this.knowledgeData.knowledgeFieldList.length - 1) {
        this.$message.warning("最后一个字段不可以向下调换位置")
        return
      }
      let curField = this.knowledgeData.knowledgeFieldList[index]
      let postField = this.knowledgeData.knowledgeFieldList[index + 1]
      this.knowledgeData.knowledgeFieldList.splice(index + 1, 1, curField)
      this.knowledgeData.knowledgeFieldList.splice(index, 1, postField)
      this.updateFieldIndex()
    },
    updateFieldIndex() {
      for (let i = 0; i < this.knowledgeData.knowledgeFieldList.length; i++) {
        this.knowledgeData.knowledgeFieldList[i].index = i
      }
    },
    setKnowledgeFieldProperty(knowledge) {
      knowledge.knowledgeFieldList.forEach(item => {
        if (CONST.KNOWLEDGE_FIELD_VALUE_JSON_TYPE_ARRAY.includes(item.kind)) {
          item.property = JSON.stringify(item.fieldValue)
        }
        else {
          item.property = item.fieldValue
        }
      })
    },
    setKnowledgeFieldValue(knowledge) {
      knowledge.knowledgeFieldList.forEach(item => {
        if (CONST.KNOWLEDGE_FIELD_VALUE_JSON_TYPE_ARRAY.includes(item.kind)) {
          item.fieldValue = JSON.parse(item.property)
        }
        else {
          item.fieldValue = item.property
        }
      })
    },
  },
  data() {
    return {
      crtField: {},
      id: '0001AA100000000DX0ZG',
      videoBlockStyle: "",
      showCurtain: false,
      showImgPreview: false,
      imgPath: '',
      imgTitle: '',
      knowledgeData: {},
      mainContentHeight: 0,
      containerHeight: 0,
      tagCascadeProps: {
        value: 'id',
        label: 'name',
        multiple: true,
        checkStrictly: true,
      },
      showVideoPreview: false,
      videoSource: "",
      nameSuggestionDialogVisible: false,
      filterMode: true
    }
  },
  activated() {
    if (this.$route.meta.isUseCache) {
      return
    }
    // 计算内容区域的高度
    this.mainContentHeight = CONST.WORKSPACE_HEIGHT - 105;
    this.containerHeight = CONST.WORKSPACE_HEIGHT - 105;
    // 加载数据
    this.getKnowledgeByTaskItem()
    this.filterMode = true;
    if (CONST.NEW_MEDIA_LIB_ID === this.taskItem.knowledgeLibId) {
      this.filterMode = false;
    }
  },
  beforeRouteLeave(to, from, next) {
    //跳转到搜索页面时，search为搜索页面名称
    if (to.name === 'myEdit' || to.name === 'myAudit' || to.name === 'taskEditManage' || to.name === 'MyAudit') {
      to.meta.isUseCache = true;
    }
    from.meta.isUseCache = false;
    next();
  }
}
</script>

<style scoped>
.field {
  width: 99%;
}

.bottom-space {
  margin-bottom: 10px;
}

.img-preview-block {
  position: absolute;
  top: 100px;
  right: 500px;
  z-index: 200;
}

.img-preview-block img {
  max-width: 600px;
  max-height: 600px;
}

.curtain {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 150;
}

.video-preview-block {
  position: absolute;
  width: 640px;
  height: 360px;
  z-index: 200;
}

.curtain-button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.menu-item-wrapper {
  max-height: 600px;
  overflow: auto;
}

.titleTagClass {
  width: 10px;
  height: 30px;
  background-color: green;
  border-radius: 5px;
  display: inline-block;
}

.titleClass {
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
  }
</style>
